<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>

</head>

<body>
    <div id="box">
        <!-- <input type="number" name="" id="">
        <input type="button" name="" id="" value="加入购物车"> -->
        <!-- <h1></h1>
        <h2></h2>
        <img src="" alt="">
        <p></p> -->
    </div>

    <script src="./request.js"></script>
    <script>



        /*   
            4 - 列表进入详情页
                  列表a标签中 使用 href属性  href = 'item.html?id=商品id'
                  在item页面通过js 
                  获取url中搜索参数 location.search

                  提取对应的id，调用商品详情接口--拼字符串 展示到页面中
                  
        */



        let search = location.search;
        console.log(search);
        // 获取url中搜索参数中id对应的值


        function getValue(str, key) {


            // str  -》'aa=11&bb=22
            // 2- -使用& 分割字符串 
            var arr = str.split('&');
            console.log(arr);//['a=11', 'b=22']

            // 保存循环中提取的结果
            var value;
            // 3-循环遍历 元素--字符串  
            arr.forEach(function (keyValue) {
                // console.log(keyValue);// xxx==xxx 
                // 获取等前面 和 后面的值 
                var keyValueArr = keyValue.split('=');//['a','11']  ['b','22']
                // console.log(keyValueArr);
                //判断，等号前面的值 是 a ，那么等号后的就是我们需要的结果
                if (keyValueArr[0] === key) {
                    // console.log(keyValueArr[1]);
                    //把结果保存到全局变量
                    value = keyValueArr[1]

                    // ------这里return  ，给这个函数参数的返回值，给不了外部函数返回值-如果这里是for循环，是可以在循环中中return 的
                    // return value;
                }
            })

            return value;

        }


        // var r = getValue('aa=11&bb=22', 'bb')//11
        // 利用13天 封装好的 函数 获取id对应的值
        var id = getValue(search.slice(1), 'id')//11
        console.log(id);

        // 调用 商品详情接口-获取商品信息
        let goodsItemAPI = '/goods/item/' + id;
        http.get(goodsItemAPI).then(r => {
            console.log(r.data.info);
            let { info } = r.data

            let str = ` <h1>${info.title}</h1>
                        <h2>${info.current_price}</h2>
                        <input  type="number" name="" id="pnum" value="1" min="1">
                         <input onclick="cartAddFn()" type="button" name="" id="" value="加入购物车">
                        <img src="${info.img_big_logo}" alt="">
                        <p>${info.goods_introduce}</p>`;

            document.querySelector('#box').innerHTML = str;
            // 这里才能获取 加入购物车按钮
        })


        // (

        /* 
            加入购物车
            1-行内事件
            2-调用加购车接口 （看接口文档） 获取到接口需要的参数
                goodsId 商品id
                id 用户id --一般在登录的时候返回的 （修改登录页面 代码--登录成功以后 用户id存入本地）

                加入购物车接口--需要登录权限--调用接口的是 把 token 传入到请求头中authorization 字段中
        
                ****请求拦截器 设置 token （拦截到请求发起之前的这个时间点）
                     等于可以 请求发起前做个操作-  读取本地token，如果有，就设置到请求头中
                */
        // async function cartAddFn() {
        //     let cartAdd = '/cart/add'
        //     console.log('');
        //     let goodsId = id;
        //     let userId = localStorage.getItem('uid');

        //     // 设置 请求头

        //     let r = await http.post(cartAdd, { goodsId, id: userId })
        //     console.log(r.data);
        //     alert(r.data.message)

        // }

        async function cartAddFn() {
            let cartAdd = '/cart/add'
            console.log('');
            let goodsId = id;
            let userId = localStorage.getItem('uid');

            let pnum = document.querySelector('#pnum').value;
            // 同时发起了pnum个加入购物车的请求，都成功以后p0 检测到都成功，弹出提示
            // 循环pnum次，每次都发起一个请求
            let arr = [];//存每次创建promsie对象
            for (let i = 0; i < pnum; i++) {
                let p = http.post(cartAdd, { goodsId, id: userId })
                arr.push(p)
            }
            let p0 = Promise.all(arr);
            p0.then(r => {
                console.log(r);
                //判断请求返回的数据中有一个是401 未授权
                let flag = r.some(v => v.data.code == 401);
                if (flag == false) {
                    alert('加入购物车成功')
                }
                // if(r){}
                // if()

            })


            // 设置 请求头

            // let r = await http.post(cartAdd, { goodsId, id: userId })
            // console.log(r.data);
            // alert(r.data.message)

        }

    </script>

</body>

</html>